<template>
  <ees-breadcrumb :items="['地区', '地区列表']" />
  <Card>
    <Cond @query="load" :model="pageIn">
      <CondItem title="关键字" prop="q">
        <Input v-model="pageIn.q" />
      </CondItem>
      <template #bottom> </template>
    </Cond>
    <Table :data="model" @sorter-change="(f, m) => onSort(f, m, load)" :loading="loading">
      <template #columns>
        <TableColumn title="名称" field="name" />
        <TableColumn title="全称" field="namesPath" />
        <TableColumn title="行政编码" width="120" field="code" />
        <TableColumn title="区号" width="120" field="areaCode" />
        <TableColumn title="拼音" width="120" field="pinyin" />
        <TableColumn title="邮政编码" width="120" field="zip" />
        <TableColumn title="经度" width="120" field="lng" />
        <TableColumn title="纬度" width="120" field="lat" />
      </template>
    </Table>
  </Card>
</template>

<script setup>
import { useLoading, usePage } from '@idmy/core'
import { ref } from 'vue'
import { pageArea } from './services'

const { pageIn, onSort } = usePage({
  condition: {
    isAll: true,
    level: 3,
  },
})

const model = ref([])
const [load, loading] = useLoading(async () => {
  model.value = await pageArea(pageIn)
}, true)
</script>
